<template>
     <!--面包屑-->
<div style="margin-bottom: 30px">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <router-link to="/ContractCshow">承运合同管理</router-link>
    </el-breadcrumb-item>
    <el-breadcrumb-item>承运信息添加</el-breadcrumb-item>
  </el-breadcrumb>
</div>
        <div >
    <h2>承运合同添加</h2><br>
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="form"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <table>
    <tr>
        <td>
    <el-form-item label="合同标题：" style="font-size: 20px;float: right;" prop="contractTitle">
            <el-input v-model="form.contractTitle" style="width: 300px;height: 40px;"
            placeholder="请输入合同标题" clearable />
          </el-form-item>
      
        </td>
        <td>
          <el-form-item label="承运单位" style="font-size: 20px;float: right;" prop="unit">
            <el-input v-model="form.unit" style="width: 300px;height: 40px;"
            placeholder="请输入对方单位" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="承运负责人：" style="font-size: 20px;float: right;" prop="personCharge">
            <el-input v-model="form.personCharge" style="width: 300px;height: 40px;"
            placeholder="请输入对方负责人" clearable />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="线路" style="font-size: 20px;float: right;" prop="lineName">
            <el-select v-model="form.lineName" placeholder="线路" style="width: 300px;">
        <el-option v-for="item in line" :label="item" :value="item" />
    
      </el-select>
         </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="吨运价" style="font-size: 20px;float: right;" prop="tonPrice">
            <el-input v-model="form.tonPrice" style="width: 300px;height: 40px;"
            placeholder="请输入经办人" clearable />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="包车条件吨位" style="font-size: 20px;float: right;" prop="ton">
            <el-input v-model="form.ton" style="width: 300px;height: 40px;"
            placeholder="请输入包车条件吨位" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="包车金额：" style="font-size: 20px;float: right;">
            <el-input v-model="form.charteredBusPrice" style="width: 300px;height: 40px;"
            placeholder="请输入包车金额" clearable />
          </el-form-item>
        </td>
      
     
        <td>
          <el-form-item label="经办人" style="font-size: 20px;float: right;" prop="attn">
            <el-input v-model="form.attn" style="width: 300px;height: 40px;"
            placeholder="请输入经办人" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="签订时间"   style="font-size: 20px;float: right;">
            <el-date-picker v-model="form.dateofSigning" type="date"  value-format="YYYY-MM-DD"
            placeholder="请选择签订时间" clearable  style="width: 300px;height: 40px;"/>
          </el-form-item>
        </td>
          <td>
          <el-form-item label="合同金额" style="font-size: 20px;float: right;">
            <el-input v-model="form.contractAmount" style="width: 300px;height: 40px;"
   placeholder="合同金额" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <el-form-item label="合同标的或项目说明" 
            style="font-size: 20px;width: 970px;height: 100px;float: right;" >
          <el-input v-model="form.contractNote" type="textarea" style="font-size: 20px;width: 970px;height: 100px;"></el-input>
          </el-form-item>
          
        </td>
      </tr>
      <tr>
        <td colspan="2">
        
          <el-form-item label="合同主要条款/边更条款" 
            style="font-size: 20px;width: 970px;height: 100px;float: right;">
          <el-input v-model="form.contractTerms" type="textarea" style="font-size: 20px;width: 970px;height: 100px;"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr >
        <td style="font-size: 20px;">合同文本(附件)：</td>
        <td>
                         <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="http://10.223.8.15:8000/hwrite/api/Contract/Upfile"
    multiple
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :limit="3"
    :on-exceed="handleExceed"
    :on-success="handleSuccess"
  >
    <el-button type="primary">选取文件</el-button>
  
  </el-upload>
          <span>（单个附件最大支持20M，支持：PDF、Word、Excel、Txt格式）</span> 
        </td>
      </tr>
   
  </table>
    </el-form><br><br>
      <tr align="center">
        <el-button type="primary" @click="Approval" 
          style="width: 150px;height: 50px;">提交审批</el-button>
        <el-button  @click="Cancel" style="width: 150px;height: 50px;"
         >取消</el-button>
        <el-button type="primary" @click="onSubmit" 
          style="width: 150px;height: 50px;">保存草稿</el-button>
  
      </tr>
   

  </div>
</template>
    
<script setup lang='ts'>
     import axios  from 'axios';
     import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
import type { UploadProps, UploadUserFile } from 'element-plus'
    import { ref, reactive, onMounted,watch } from 'vue'; 
    import { useRouter, useRoute } from 'vue-router';
    const router = useRouter();
    const form=reactive({
        contractTitle:'',//合同标题
         unit:'',//单位
        personCharge:'',//负责人
        lineId:1,//线路
        tonPrice:'',//吨价
        ton:'',//吨数
        charteredBusPrice:'',//包车金额
        attn:'',//经办人
        dateofSigning:'',//签订日期
        contractAmount:'',//合同金额
        contractNote:'',//合同标的或项目说明
        contractTerms:'',//合同主要条款/变更条款
        contractText:'',//合同文本
         contractNumber:'',//合同编号
         ccontractStatus:0,//合同状态
        contractClassification:2,//合同分类
        createdBy:'张三',//创建人
    })
 onMounted(()=>{
    getLine()
})
//线路
const line=ref([])
const getLine=()=>{
    axios.get('/hread/api/ContractRead/Getlines').then(res=>{
       
       line.value=res.data.data.list.map(o=>o.lineName)
    })
  

}
//上传文件
const handleSuccess=(any:any)=>{
console.log(any);
form.contractText=any;
}
//保存草稿
const onSubmit = () => {
  //日期年月日

 var date = new Date();
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var nowDate = "CY123"+year + '-' + month + '-' + day;
  form.contractNumber=nowDate
  console.log(nowDate)
 form.ccontractStatus=1
 console.log(form)
 axios.post('/hwrite/api/Contract/AddContract',form).then(res=>{
       if(res.data.data>0){
        ElMessage({
          message: '保存成功',
          type: 'success',
        })
        router.push('/ContractCshow')
       }else{
        ElMessage.error('提交失败')
       }
     })
  }
//取消
const Cancel=()=>{
  router.push('/ContractCshow')
}
//提交审批
const Approval=()=>{
    //日期年月日
 var date = new Date();
 
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var nowDate = "CY123"+year + '' + month + '' + day;
  form.contractNumber=nowDate
  console.log(nowDate)
form.ccontractStatus=2
     axios.post('/hwrite/api/Contract/AddContract',form).then(res=>{
       if(res.data.data>0){
        ElMessage({
          message: '提交成功',
          type: 'success',
        })
        router.push('/ContractCshow')
       }else{
        ElMessage.error('提交失败')
       }
     })
       }
  //合同添加
const fileList = ref<UploadUserFile[]>([])
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
   
console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile)
 
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
   
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  
  return ElMessageBox.confirm(
    `确定删除吗 ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  )
}
const rules = reactive<FormRules>({
    contractTitle: [
    { required: true, message: '合同标题不能为空', trigger: 'blur' },
  
  ],
  unit: [
    { required: true, message: '货主不能为空', trigger: 'blur' },
  
  ],
  personCharge: [
    { required: true, message: '货主负责人不能为空', trigger: 'blur' },
  
  ],
  lineName: [
    { required: true, message: '线路不能为空', trigger: 'blur' },
  
  ],
  tonPrice: [
    { required: true, message: '吨运价不能为空', trigger: 'blur' },
  
  ],
  attn: [
    { required: true, message: '经办人不能为空', trigger: 'blur' },
  
  ],
})

</script>
    
<style>
    
</style>